import React, { Component } from 'react';
import { Row, Col, Button, Table, Popover, Card, DatePicker, Dropdown, Input } from 'antd';
import moment from 'moment';
import { Loading } from 'base-antd-components';
import BaseForm from '../../components/BaseForm/index.jsx';
import CustomDatePicker from '../../components/CustomDatePicker/index.jsx';
import FunnelPlot from '../../components/FunnelPlot/index.jsx';
import CombinedSelector from '../../components/CombinedSelector/index.jsx';
import TreePanel from '../../components/TreePanel/index.jsx';
import thousandBitSeparator from '../../utils/thousandBitSeparator.js';
import ColorPicker, { SketchPicker } from 'react-color';
import MyPicker from './CustomPicker.jsx';
import FormModal from '../../components/FormModal/index.jsx';

const colors = ['rgba(233,96,2,1)', 'rgba(247,161,39,1)', 'rgba(2,125,190,1)', 'rgba(0,163,200,1)', 'rgba(61,133,3,1)', 'rgba(173,182,183,1)'];
const testData = {
  launchRange: '2018.08.10-2018.09.10',
  totalClicks: '2100',
  totalFlow: '2000',
  list: [{
    title: '梦龙中秋',
    flow: '800',
  }, {
    title: '河马互动',
    flow: '300',
  }, {
    title: '666贷款',
    flow: '250',
  }, {
    title: '丸美整形',
    flow: '230',
  }, {
    title: '雀巢',
    flow: '210',
  }, {
    title: '伊利',
    flow: '160',
  }, {
    title: '蒙牛',
    flow: '50',
  }]
};

const treeSelectorMockData = [
  {
    name: '0-0',
    key: '0-5',
    children: [
      {
        name: '面食',
        key: '0-0-0',
        children: [
          { name: '米粉', key: '0-0-0-0', disabled: true },
          { name: '味精', key: '0-0-0-1' },
          { name: '大蒜', key: '0-0-0-2' },
        ],
      },
      {
        name: '肉类',
        key: '0-0-1',
        children: [
          { name: '大肉', key: '0-0-1-0', disabled: true },
          { name: '中肉', key: '0-0-1-1' },
          { name: '小肉', key: '0-0-1-2' },
        ],
      },
      { name: '伪肉类', key: '0-0-2' },
    ],
  },
  {
    name: '0-1',
    key: '0-1',
    children: [
      {
        name: '0-1-0',
        key: '0-1-0',
        children: [
          { name: '0-1-0-0', key: '0-1-0-0' },
          { name: '0-1-0-1', key: '0-1-0-1' },
          { name: '0-1-0-2', key: '0-1-0-2' },
        ],
      },
      {
        name: '0-1-1',
        key: '0-1-1',
        children: [
          { name: '0-1-1-0', key: '0-1-1-0' },
          { name: '0-1-1-1', key: '0-1-1-1' },
          { name: '0-1-1-2', key: '0-1-1-2' },
        ],
      },
      { name: '0-1-2', key: '0-1-2' },
    ],
  },
  { name: '0-2', key: '0-2' },
];

const handleColorChange = ({ hex }) => console.log(hex);

class Demo extends Component {

  state = {
    visible: true,
    treeSelectorMultipleData: treeSelectorMockData,
  }

  getFormList = () => {
    const formList = [
    {
      type: 'CASCADEDATEPICKER',
      field: 'dateRage',
      initialValue: null,
      width: 150,
      rules: [{
        required: true,
        message: '时间区段不能为空！',
      }]
    }, 
    {
      type: 'RANGEDATEPICKER',
      field: 'dateRage1',
      initialValue: { startDate: moment('2018-12-27'), endDate: moment('2018-12-30')},
      width: 150,
      rules: [
        {required: true, type: "object", message: "请设置有效期"}
      ]
    }, 
    {
      type: 'RANGEDATEPICKER',
      field: 'dateRage2',
      initialValue: { startDate: moment('2018-12-27'), endDate: moment('2018-12-30')},
      width: 150,
      rules: [{
        required: true,
        message: '时间区段不能为空！',
      }]
    }
    // {
    //   type: 'CASCADEDATEPICKER',
    //   field: 'dateRage',
    //   initialValue: null,
    //   width: 150,
    //   rules: [{
    //     required: true,
    //     message: '时间区段不能为空！',
    //   }]
    // }
    ];
    return formList;
  }

  handleModalCancel = () => {
    this.setState({
      visible: false
    });
  }

  getTableProps = () => {

    const columns = [{
      title: '广告名称',
      dataIndex: 'planName',
      key: 'planName'
    }, {
      title: '广告来源',
      dataIndex: 'adSource',
      key: 'adSource'
    }, {
      title: '投放时间范围',
      dataIndex: 'launchRange',
      key: 'launchRange'
    }, {
      title: '曝光次数',
      dataIndex: 'expressions',
      key: 'expressions',
      align: 'right'
    }, {
      title: '点击次数',
      dataIndex: 'clicks',
      key: 'clicks',
      align: 'right'
    }, {
      title: 'CTR',
      dataIndex: 'ctr',
      key: 'ctr',
      align: 'right'
    }, {
      title: '广告收益',
      dataIndex: 'income',
      key: 'income',
      align: 'right',
      render: (text, record) => {
        return thousandBitSeparator(record.income);
      }
    }];

    const dataSource = [{
      planName: '梦龙中国',
      adSource: '百度聚屏视频',
      launchRange: '2018.08.10-2018.11.01',
      expressions: '20',
      clicks: '123',
      ctr: '50.1%',
      income: '3000'
    }, {
      planName: '河马互动',
      adSource: '百度聚屏视频',
      launchRange: '2018.08.10-2018.11.01',
      expressions: '20',
      clicks: '123',
      ctr: '50.1%',
      income: '3000'
    }, {
      planName: '丸美整形',
      adSource: '百度聚屏视频',
      launchRange: '2018.08.10-2018.11.01',
      expressions: '20',
      clicks: '123',
      ctr: '50.1%',
      income: '3000'
    }];

    return {
      columns,
      dataSource
    };
  }

  getProgressComponent = () => {

    const commonStyle = {
      display: 'inline-block',
      height: '100%'
    };

    let sum = 0;
    const progressArr = testData.list.slice(0, 6);
    const extraArr = testData.list.slice(6);
    const progressArrLen = progressArr.length;
    let content = null;

    return (
      <div style={{ marginTop: '3px', width: '80%'}}>
        <div className="progress-wrapper" style={{boxSizing: 'border-box', height: '36px', borderRadius: '10px', lineHeight: '36px' }}>
          {progressArr.map((item, index) => {
            let component = null;
            let width = item.flow/testData.totalFlow;
            const tempWidth = (width*100).toFixed(2);
            if (index !== progressArrLen-1) {
              sum += width*100;
              width = `${tempWidth}%`;
            } else {
              width = `${(100-sum).toFixed(2)}%`;
            }
            let styleObj = {
              ...commonStyle,
              width,
              backgroundColor: colors[index],
            };
            if (index === 0) {
              if (progressArrLen === 1) {
                styleObj = Object.assign({}, styleObj, {
                  borderRadius: '10px'
                });
              } else {
                styleObj = Object.assign({}, styleObj, {
                  borderRadius: '10px 0px 0px 10px'
                });
              }
              component = (
                <div style={styleObj} key={index}>
                  <span style={{ color: 'rgba(255,255,255,1)' }}>{width}</span>
                </div>
              );
            } else {
              if (index === progressArrLen-1) {
                styleObj = Object.assign({}, styleObj, {
                  borderRadius: '0px 10px 10px 0px'
                });
                if (extraArr.length) {
                  extraArr.unshift(progressArr[progressArrLen-1]);
                  content = (
                    <div>
                      {extraArr.map((extraItem, extraIndex) => {
                        return (
                          <Row type="flex" align="space-between" key={extraIndex}>
                            <Col>{`${extraItem.title}:`}</Col>
                            <Col>{`${((extraItem.flow/testData.totalFlow)*100).toFixed(2)}%`}</Col>
                          </Row>
                        )
                      })}
                    </div>
                  );
                  // (
                  //   <ColorPicker type="sketch" onChangeComplete={ handleColorChange }/>
                  // );
                  component = (
                    <Popover placement="bottom" content={content} key={index}>
                      <div style={styleObj}>
                        <span style={{ color: 'rgba(255,255,255,1)' }}>{width}</span>
                      </div>
                    </Popover>
                  );
                } else {
                  component = (
                    <div style={styleObj} key={index}>
                      <span style={{ color: 'rgba(255,255,255,1)' }}>{width}</span>
                    </div>
                  );
                }
              } else {
                component = (
                  <div style={styleObj} key={index}>
                    <span style={{ color: 'rgba(255,255,255,1)' }}>{width}</span>
                  </div>
                );
              }
            }

            return component;
          })}
        </div>
        <div style={{ height: '36px', lineHeight: '36px' }}>
          {progressArr.map((item, index) => {
            let title = item.title;
            let width = 1/progressArrLen;
            width = `${width*100}%`;
            const styleObj = {
              display: 'inline-block',
              width: '12px',
              height: '12px',
              verticalAlign: 'middle',
              backgroundColor: colors[index],
              borderRadius: '100%'
            };

            if (index === progressArrLen-1) {
              if (extraArr.length) {
                title = '其他';
              }
            }

            return (
              <div style={{ display: 'inline-block', marginRight: '15px', height: '100%' }} key={index}>
                <div style={styleObj}></div>
                <span style={{ display: 'inline-block', marginLeft: '5px', verticalAlign: 'middle' }}>{title}</span>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
// wvcLg97351
  render() {
    const { visible, treeSelectorMultipleData } = this.state;
    return (
      <div style={{ textAlign: 'center', fontSize: 12 }}>
        <Dropdown overlay={(<CustomDatePicker weekType="west"></CustomDatePicker>)} trigger={['click']}>
          <Input style={{width: '500px'}}></Input>
        </Dropdown>
{/*        <TreePanel></TreePanel>
        <CombinedSelector
          multiple
          width="320px"
          selectable={true}
          placement='topLeft'
          data={treeSelectorMultipleData}
          onBlurHandle={(selectedItems,selectedKeys)=>{ console.log('组件失焦后返回键值:', selectedKeys);
            console.log('组件失焦后返回数据:', selectedItems);}}
          handlerConfirmClick={(selectedItems,selectedKeys)=>{ console.log('组件失焦后返回键值:', selectedKeys);
            console.log('组件失焦后返回数据:', selectedItems);}}
          initialSelectedDetail={['0-1-1-0', '0-0-0-0']}
          fields={{
            key: 'key',
            title: 'name',
            children: 'children',
            checked: 'checked',
            disabled: 'disabled',
          }}
          customizedInfo = {{
            searchPlaceHolder: '请输入搜索门店',
            treeRootTitle: '全部门店',
            suffixMsg: ' 家门店',
            inputPlaceHolder: '请选择分组门店',
          }}
        />*/}
{/*        <FormModal 
          modalProps={{ title: '新建', visible: visible, okText: "确定", cancelText: '取消', onCancel: this.handleModalCancel }}
          formProps={{ formList: this.getFormList(), onSubmit: (values) => {
            console.log(values);
          } }}
        ></FormModal>*/}
        <Row style={{ padding: '0 20px', textAlign: 'left' }}>
          <Col span={12}>
            <span>投放起止日期:</span>
          </Col>
          <Col span={12}>
            <span style={{ marginRight: '30px' }}>{`日期: ${testData.launchRange}`}</span>
            <span style={{ marginRight: '30px' }}>{`总流量: ${thousandBitSeparator(testData.totalFlow)}M`}</span>
            <span style={{ marginRight: '30px' }}>{`总点击: ${thousandBitSeparator(testData.totalClicks)}`}</span>
          </Col>
        </Row>
        <Row style={{ padding: '0 20px'}}>
          <Col span={12}>
            <Row type="flex" align="start" justify="start" style={{ textAlign: 'left' }}>
              <Col>
                <BaseForm
                  showOptBtn={false}
                  formList={this.getFormList()}
                  columns={1}
                  isHideReset={true}
                  formItemLayout={{
                    labelCol: {
                      span: 0,
                    },
                    wrapperCol: {
                      span: 24,
                    },
                  }}
                  wrappedComponentRef={inst => {
                    this.BaseForm = inst;
                  }}
                />
              </Col>
              <Col style={{ marginTop: 5 }}>
                <Button type="primary" style={{ marginLeft: '10px' }} onClick={() => {
                  console.log(this.BaseForm.handleSubmit());
                }}>查询</Button>
              </Col>
            </Row>
          </Col>
          <Col span={12}>
            {this.getProgressComponent()}
          </Col>
        </Row>
        <Loading></Loading>
        <Table {...this.getTableProps()} pagination={false} rowKey="planName"></Table>
      </div>
    );
  }
}

export default Demo;
